<template>
    <div class="goods">
        <div v-if="listShow">
            <van-nav-bar :title="$t('mall.title_one')" leftArrow :right-text="$t('mall.title_four')" @click-right="myOrder" @click-left="_return"/>
            <div class="goodsMain">
                <van-row>
                    <van-col :span="22">
                        <div class="nav">
                            <li v-for="item in nav" @click="showData(item.id)" :class="navId == item.id ? 'text' : 'noBorder'">{{item.cate_title}}</li>
                        </div>
                    </van-col>
                    <van-col :span="2">
                        <van-icon name="apps-o" @click="showNav"/>
                    </van-col>
                </van-row>
                <div class="list">
                    <ul class="mall-list">
                        <li class="mall-item" v-for="(mall, key) in mallList" :key="key" @click="handleToDetail(mall)">
                            <div class="mall-item-cover">
                                <img :src="mall.web + mall.goods_logo" :alt="mall.goods_title.substr(0, 10)">
                            </div>
                            <div class="mall-item-desc">
                                <h4 class="mall-item-title">{{ mall.goods_title }}</h4>
                                <div class="mall-item-info">
                                    <div class="mall-item-count">{{ $t('mall.sold') }}{{ mall.package_sale }}{{ $t('mall.pieces') }}</div>
                                    <div class="mall-item-tip">
                                        <p class="mall-item-price">{{ Number(mall.price).toFixed(2) }} {{ mall.coin_name.toUpperCase() }}</p>
                                        <p class="mall-item-txt">{{ $t('mall.express') }}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <detail v-if="detailShow" :shopItem="shopItem" @_return="_returns" @showShop="showShop"></detail>
        <shop v-if="shopShow" :navIndex="navId" @_return="_returns" @showGood="showGood"></shop>
        <order v-if="orderShow" @_return="_returns"></order>
    </div>
</template>

<script>
    import detail from '@/components/shop/detail'
    import shop from '@/components/shop/shop'
    import order from '@/components/shop/order'
    export default {
        data() {
            return {
                nav:[],
                tabData: [],
                curTab: null,
                curTabActive: 0,
                mallList: [],
                listShow:true,
                detailShow:false,
                shopShow:false,
                orderShow:false,
                navId:0,
                shopItem:''
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            _returns(){
                this.listShow = true
                this.shopShow = this.orderShow = this.detailShow = false
                this.getNav()
            },
            myOrder(){
                this.orderShow = true
                this.listShow = false
            },
            handleToDetail(mall){
                this.listShow = false
                this.detailShow = true
                this.shopItem = mall.id
            },
            getNav(){
                this.$api.get('goods/goodsCate')
                    .then(res =>{
                        this.nav = res.detail
                        this.navId = this.nav[0].id
                        this.getData(this.navId)
                    })
            },
            getData(navId){
                this.$api.get('goods/index',{cid:navId})
                    .then(res =>{
                        console.log(res)
                        this.mallList = res.detail.list
                    })
            },
            showNav(){
                this.listShow = false
                this.shopShow = true
            },
            showData(id){
                this.navId = id
                this.$api.get('goods/index',{cid:this.navId})
                    .then(res =>{
                        console.log(res)
                        this.mallList=res.detail.list
                    })
            },
            showGood(item){
                this._returns()
                this.showData(item.id)
            },
            showShop(){
                this.detailShow = false
                this.listShow = true
            }
        },
        created() {
            this.getNav()
        },
        mounted() {
            this.$emit('disappear')
        },
        components:{
            detail,
            shop,
            order
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg, #53d9b5, #2bc299);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #fff
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .text
        border-bottom 2px solid font
        color font !important
    .noBorder
        border none
        color #D8D8D8 !important
    .goodsMain
        width 94%
        margin 0 auto
        .van-row
            background bac
            border-radius 5px
            display flex
            display -webkit-flex
            align-items center
            .nav
                overflow-x auto
                display flex
                display -webkit-flex
                -webkit-flex-flow row nowrap
                flex-flow row nowrap
                width auto
                li
                    float left
                    margin-left 10px
                    color #D8D8D8
                    flex-shrink 0
                    padding 12px 0
                    width 70px
                    text-align center
            .van-col--2
                text-align center
                color font
        .mall
            &-item
                padding 15px
                display flex
                margin-top 10px
                border-radius 5px
                border-bottom 1px solid #ebebeb
                &-cover
                    width 150px
                    flex 0 0 150px
                    height 95px
                    margin-right 8px
                    img
                        width 100%
                        height 100%
                &-title
                    color #333
                    line-height 20px
                    overflow hidden
                    text-overflow ellipsis
                    display -webkit-box
                    -webkit-line-clamp 2
                    -webkit-box-orient vertical
                &-desc
                    flex 1
                    display flex
                    flex-flow column nowrap
                    justify-content space-between
                &-count
                    font-size 12px
                    color #898989
                &-tip
                    display flex
                    justify-content space-between
                    margin-top 5px
                &-price
                    font-size 20px
                    color #2bc49b
                &-txt
                    font-size 12px
                    color #898989
                    align-self flex-end



</style>